* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Sen', sans-serif;
  font-size: $fs-m;
  color: $body-color;
  background-color: black;
}

#background {
  opacity: 0.4;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.is-text-primary { color: $primary-color; }
.is-text-secondary { color: $secondary-color; }

.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: $spacing-xs; }
.mt1 { margin-top: $spacing-xs; }
.my1 { margin-top: $spacing-xs; margin-bottom: $spacing-xs; }

.mb3 { margin-bottom: $spacing; }

.has-text-centered { text-align: center; }

.is-flex { display: flex; }
.is-justify-centered { justify-content: center; }
.is-flex-end { align-self: flex-end; }

a {
  text-decoration: none;
  color: $secondary-color;
  transition: all 0.8s;
  opacity: 0.8;
}

a:hover {
  color: $primary-color;
  transition: all 0.8s;
}

button {
  font-family: 'Sen', sans-serif;
  background: none;
  border: none;
}

button:focus {
  outline: none;
}

button:hover {
  cursor: pointer;
}

button:disabled {
  background-color: $third-color !important;
  cursor: not-allowed;
}

input[type=checkbox] {
  visibility: hidden;
  display: none;
}

svg {
  stroke: $body-color;
  transition: all 0.8s;
}

svg:hover {
  stroke: $primary-color;
  transition: all 0.8s;
}

svg:focus {
  stroke: $primary-color;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-timing-function: ease-out;
}